<template>
  <div class="search">
    <div class="search_full"></div>
    <div>
      <div class="type-center">
        <ul @click.capture="choose($event)">
          <li
            v-for="(v,i) in lis"
            :key="i"
            :id="`li${i}`"
            :class=" li==v?'choosed':''"
            :text.prop="v"
            @click.stop
          >{{ v }}</li>
        </ul>
      </div>
    </div>
    <ViewScroll class="search-box">
      <div>
        <div class="type-full"></div>
        <Like :items="searchList"></Like>
        <div class="bottom-full"></div>
      </div>
    </ViewScroll>
    <fiexd-menus></fiexd-menus>
  </div>
</template>
<script>
import Like from "../components/Like";
import FiexdMenus from "../components/FiexdMenus";
export default {
  data() {
    return {
      lis: [],
      li: "综合",
      fcid: 20004908,
      searchList: [],
  
    };
  },

  watch: {
    fcid: function() {
      this.loadSearchData();
    },
    // $route(to, from) {
    //   if (to.query.q !== from.query.items) {
    //     this.q = this.$route.query.items;
    //   }
    //   this.loadSearchHot();
    // }
  },
  computed:{
    q:function(){
        return this.$route.query.title;
    }
  },
  methods: {
    choose(e) {
      this.li = e.target.innerHTML;
    },
    loadSearchData() {
      this.$api
        .loadmogujieData({
          fcid: this.fcid,
          cKey: 16,
          sort: "pop",
          page: 1
        })
        .then(data => {
          // console.log(data);
          this.searchList = data.wall.docs;
        })
        .catch(error => {
          console.error(error);
        });
    },
    loadList() {
      this.$api
        .loadmogujieData({})
        .then(success => {
          for (let i = 0; i < 3; i++) {
            
            this.lis.push(success.filter.list[i].title);
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    loadSearchHot() {
      this.$api
        .loadmogujieData({
          q: this.q,
          cKey: 46,
          page: 1,
          sort: "pop"
        })
        .then(data => {
          this.searchList = data.wall.docs;
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
  components: {
    Like,
    FiexdMenus
  },
  mounted() {
    this.loadList();
    this.loadSearchData();
    this.loadSearchHot();
    // console.log(this.$route.query.link)
    if (this.$route.query.link) {
      this.fcid = this.$route.query.link
        .split("?", 2)[1]
        .split("=", 2)[1]
        .split("&", 1)[0];
    }
  },
  beforeMount() {}
};
</script>
<style lang="less" scoped>
.search-box {
  position: absolute;
  top: 0rem;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  // overflow-y: auto;
  overflow: hidden;
}
.search {
  width: 100%;
  height: 100%;
  .search_full {
    width: 100%;
    height: 100px;
  }
  .type-center {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 100px;
    position: fixed;
    z-index: 99;
    background-color: white;
    overflow: hidden;

    //   text-align: center;
    //   line-height: 100px;
    ul {
      display: flex;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      font-size: 30px;
      li:hover {
        color: #f3587f;
      }
    }
    ul > li {
      list-style: none;
      width: 30%;
      height: 50px;
      border-right: 1px solid #ccc;
      // line-height: 100px;
      // padding-top:20px;
      margin-top: 30px;
    }
    #li2 {
      border: none;
    }
  }
  .type-full {
    width: 100%;
    height: 220px;
  }
  .bottom-full {
    width: 100%;
    height: 100px;
  }
}
.choosed {
  color: #f34b70;
}
</style>